<template>
  <div class="home-history-container">
    <div class="history-header">
      <div class="history-header-left">
        <van-search
          class="input-search"
          shape="round"
          background="#F8F8F8"
          placeholder="商品搜索"
          v-model.trim="searchKeyword"
          @input="showGoods"
        />
      </div>
      <div class="history-header-right" @click="cancel">取消</div>
    </div>
    <div v-if="flag == 0">
      <div class="down-line"></div>

      <div class="historic-records" v-if="info.historyData && info.historyData.length!==0">
        <div class="first-line">
          <h2>历史记录</h2>
          <img src="../images/recyclebin.png" @click="removehistory" />
        </div>
        <div class="second-tags">
          <div
            class="tags"
            v-for="(item, index) in info.historyData"
            :key="index"
            @click="todetail(item)"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>

      <div class="blank"></div>

      <div class="hot-search">
        <div class="first-line">
          <h2>热门搜索</h2>
        </div>
        <div class="second-tags">
          <div
            class="tags"
            v-for="(item, index) in info.hotKeywordList"
            :key="index"
            :class="{ hot: item.is_hot == 1 }"
             @click="todetail(item)"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="flag == 1">
      <van-cell
        :title="item.name"
        is-link
        v-for="item in selectKeyWords.keywords"
        :key="item.id"
        title-class="fontStyle"
        class="line-cell"
        @click="todetail(item)"
      />
    </div>
  </div>
</template>

<script>
import SeachView from "../components/SeachView";
import {
  indexaction,
  helperaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/api/home/HomeHistory";
export default {
  components: { SeachView },
  data() {
    return {
      info: {},
      searchKeyword: "",
      selectKeyWords: [],
      flag: "0",
    };
  },
  methods: {
    async getdata() {
      let res = await indexaction({ openId: localStorage.getItem("openId") });
      this.info = res;
    },
    async showGoods() {
      let res = await helperaction({ keyword: this.searchKeyword, order: "" });
      this.selectKeyWords = res;
      this.flag = this.searchKeyword == "" ? "0" : "1";
    },
    async todetail(item) {
      await addhistoryaction({
        keyword: item.name || item.keyword,
        openId: localStorage.getItem("openId"),
      });
      this.$router.push({
        name: "HomeCategory",
        query: { name: item.name || item.keyword },
      });
    },
    async removehistory() {
      await clearhistoryAction({ openId: localStorage.getItem("openId") });
      this.getdata();
    },
    cancel() {
      this.$router.back();
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>

<style scoped lang='scss'>
.home-history-container {
  .history-header {
    width: 100%;
    height: 70px;
    padding-left: 20px;
    @include between;
    .history-header-left {
      width: 605px;
      height: 100%;
      .input-search {
        width: 100%;
        height: 100%;
        border-radius: 35px;
      }
    }
    .history-header-right {
      width: 89px;
      height: 42px;
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
  .down-line {
    height: 41px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
  }
  .historic-records {
    padding: 42px 40px 0 39px;
    .first-line {
      @include between;
      margin-bottom: 28px;
      h2 {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
      img {
        width: 20px;
        height: 20px;
      }
    }
    .second-tags {
      display: flex;
      flex-wrap: wrap;
      .tags {
        padding: 12px 21px 10px 23px;
        border: 1px solid rgba(226, 226, 226, 1);
        font-size: 20px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 10px;
        margin-bottom: 12px;
      }
    }
  }
  .blank {
    height: 20px;
    background-color: #f8f8f8;
  }
  .hot-search {
    height: 266px;
    padding: 42px 40px 0 39px;
    .first-line {
      @include between;
      margin-bottom: 28px;
      h2 {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
      img {
        width: 20px;
        height: 20px;
      }
    }
    .second-tags {
      display: flex;
      flex-wrap: wrap;
      .tags {
        padding: 12px 21px 10px 23px;
        border: 1px solid rgba(226, 226, 226, 1);
        font-size: 20px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
        margin-bottom: 12px;
        margin-right: 8px;
      }
      .hot {
        color: #9f0606;
      }
    }
  }
  .fontStyle {
    font-size: 26px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
  }
  .line-cell {
    padding: 31px 33px 25px 52px;
  }
}
</style>